<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<div id="app">
    <todo>
        <todo-title slot='todo-title' v-bind:title="title"></todo-title>
        // 这里需要注意，在v-on后面自定义的函数不支持驼峰标识
        <todo-item  slot='todo-item' v-for="(item,index) in todoItems"
                    v-bind:item="item" v-bind:index="index" v-on:delitem="removeItem(index)">
        </todo-item>
    </todo>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component('todo',{
        template:'<div>\
                    <slot name="todo-title"></slot>\
                    <div>\
                        <ul>\
                            <slot name="todo-item"></slot>\
                        </ul>\
                    </div>\
                 </div>'
    });

    Vue.component('todo-title',{
        props:['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component('todo-item',{
        props: ['item','index'],
        template: '<li>{{item}}&nbsp;&nbsp;<button v-on:click="delItem(index)">删除</button></li>',
        methods: {
            delItem: function(index){
                // 这里的 remove 是自定义事件的名称，需要在 HTML 中使用 v-on:remove 的方式指派
                this.$emit('delitem',index)
            }
        }
    });

    var vm = new Vue({
        el: '#app',
        data: {
            title: '今日动漫推荐',
            todoItems: ['《刀剑神域3》', '《关于我转生成为史莱姆这件事》', '《实力至上主义教室》']
        },
        methods: {
            removeItem: function(index){
                this.todoItems.splice(index,1);
            }
        }
    });
</script>
</body>
</html>